import { CommonForm } from "@/pages/OrderModule/common/components/CommonForm";
import { CommonModal, useModal } from "@/views/components/CommonModal";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import Typography from "@/pages/OrderModule/common/components/Typography";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { Alert, Button, Col, Form, InputNumber, Modal, Radio, Row, Space, Progress, Tabs, Select, Input, message } from "antd";
import { LoadingOutlined } from "@ant-design/icons";
import CommonInputNumber from "@/pages/OrderModule/common/components/CommonInputNumber";
import { useState, useRef, useCallback } from "react";
import EditTabs from "./EditTabs";
import EditTable from "./EditTable";

import RadioModel from "@/views/components/UIModal/RadioModel";
import ProgressModal from "@/views/components/UIModal/ProgressModal";
import ResultModal from "@/views/components/UIModal/ResultModal";
/** 批量编辑商品编码
 *
 * 目前最多支持200个商品一起操作，已超过数量
 * 京东、奇门、聚水潭的商品不可修改商品编码
 * 请勾选一个店铺的商品进行操作
 * 
 * 1、二次确认提交：确定后再判断网店是否授权，否则提示““XXX三星水墨江南【淘宝】”网店授权已过期或失效，请先授权”

如果已授权，则把修改的款式编码和商品编码填充到三方网店去修改（未填写的代表清空删除数据），接口返回修改成功这边才成功，有失败的需要显示具体失败原因，点击可前往日志查看，最后同步erp数据进行更新；

2、对应的系统商品：修改的店铺商品编码，与系统中不存在相同的商品编码时，自动生成对应的系统商品，款式编码+商品编码都同该sku一样;

系统中存在相同的商品编码时，则该店铺商品与该系统商品绑定，认为是同一个商品;

3、成功失败展示：举例：

勾选了4个sku，点击上传商品编码。

A款中两个sku都成功，B款中一个成功，一个失败。

弹框展示结果：总数2款，成功1款，失败1款。

日志记录：

A款，商品编码3980265，更新线上商品编码，成功

A款，商品编码2112311，更新线上商品编码，成功

B款，商品编码1414141，更新线上商品编码，失败

B款，商品编码1512131，更新线上商品编码，成功

sku页面点击跳转日志，都跳转到sku维度的日志记录页面，spu的则跳转到spu维度的日志页面。
 *
 */
function ActionModal(props) {
	// console.log("ActionModal(props)", props);

	const { selectedRows, isSkuType } = props;
	const ecStoreIds = selectedRows.map(e => e.ecStoreId);
	const uniqueEcStoreIds = Array.from(new Set(ecStoreIds));
	if (uniqueEcStoreIds.length > 1) {
		Modal.info({
			centered: true,
			title: "请勾选一个店铺的商品进行操作",
			okText: "确定",
			onOk() {
				props.onCancel();
			}
		});
		return <></>;
	}
	const checkedNameList = [8, 15];//淘宝，抖音
	const isIncludesCheckName = selectedRows.filter(v => !checkedNameList.includes(v.ecType)).length > 0;
	if (isIncludesCheckName) {
		Modal.info({
			centered: true,
			title: "仅淘宝、抖音的商品可修改商品编码",
			okText: "确定",
			onOk() {
				props.onCancel();
			}
		});
		return <></>;
	}
	// 显示的Model
	const [visible, setVisible] = useState("RadioModel");
	// 操作项，0，勾选的商品;1,勾选商品对应款式的所有商品
	const [operationItems, setOperationItems] = useState(0);

	function onFinish({ value }) {
		setOperationItems(value);
		setVisible("EditTableModel");
		setTimeout(() => {
			EditTableRef.current && EditTableRef.current.reFresh();
		}, 100);
	}

	const EditTableRef = useRef(null);
	const updateTableData = createSkuCodeAction => {
		EditTableRef.current && EditTableRef.current.updateTableData(createSkuCodeAction);
	};
	const [editTableData, setEditTableData] = useState([]);

	const afterFetch = d => {
		if (d.length > 200) {
			Modal.info({
				centered: true,
				title: "目前最多支持200个商品一起操作，已超过数量",
				okText: "确定",
				onOk() {
					props.onCancel();
				}
			});
		}
	};
	const editTableModel = useCallback(() => {
		if (visible !== "EditTableModel") return <></>;
		function handleOk() {
			const d = EditTableRef.current && EditTableRef.current.getTableData();
			console.log("handleOk", d);
			if (d.filter(e => e.id && (e.skuOriginalCode2 || e.spuCode2)).length) {
				setEditTableData([...d]);
				setVisible("ConfirmSubmitModel");
			} else {
				message.warning("商品编码未修改，无需提交");
			}
		}
		return (
			<CommonModal title={{ title: "批量修改原始商品编码" }} open={true} width="1134px" onCancel={props.onCancel} onOk={handleOk}>
				<div
					style={{
						height: "488px",
						flexDirection: "column",
						display: "flex",
						marginLeft: "-16px",
						marginRight: "-16px"
					}}
					className="views-table-dialog"
				>
					<Alert
						className="ml16 mr16"
						showIcon
						message={<Typography as="s1">支持店铺：淘宝、抖音，修改后请移步至店铺查看数据，以店铺数据为准。</Typography>}
					/>
					<EditTabs updateTableData={updateTableData} className="ml16 mr16" />
					<EditTable ref={EditTableRef} selectedRows={selectedRows} operationItems={operationItems} afterFetch={afterFetch} />
				</div>
			</CommonModal>
		);
	}, [selectedRows, isSkuType, visible]);

	const [result, setResult] = useState({ total: "--", success: "--", failed: "--" });
	const ConfirmSubmitModel = () => {
		if (visible !== "ConfirmSubmitModel") return <></>;

		function handleOk() {
			setVisible("ProgressModal");
			props.handleCommand("批量编辑商品编码确定后", editTableData, ({ success, data }) => {
				if (success) {
					setVisible("ResultModal");
					setResult(data);
				} else {
					message.warn("提交失败");
					onCancel();
				}
			});
		}
		function onCancel() {
			setVisible("EditTableModel");
			setTimeout(() => {
				EditTableRef.current && EditTableRef.current.setTableData(editTableData);
			});
		}

		return (
			<CommonModal title={{ title: "确认信息" }} open={true} width="530px" onCancel={onCancel} onOk={handleOk}>
				<Alert showIcon message={<Typography as="s1">为空的款式编码或商品编码，会同步平台清空删除。</Typography>} />
				<br />
				<Typography
					style={{
						fontSize: "14px",
						fontWeight: 400,
						letterSpacing: 0,
						color: "rgba(51,51,51,1)",
						marginTop: 16
					}}
				>
					请确认数据填写准确，是否确定提交？
				</Typography>
			</CommonModal>
		);
	};

	return (
		<>
			<RadioModel
				title="请确认修改的商品"
				visible={visible === "RadioModel"}
				onCancel={props.onCancel}
				onOk={onFinish}
				options={[
					{
						label: "勾选的商品",
						value: "0"
					},
					{
						label: "勾选商品对应款式的所有商品",
						value: "1"
					}
				]}
			/>

			{ editTableModel() }
			<ConfirmSubmitModel />
			<ProgressModal
				visible={visible === "ProgressModal"}
				title="上传商品编码"
				onCancel={() => {
					setVisible("ResultModal");
				}}
			/>
			<ResultModal
				visible={visible === "ResultModal"}
				onCancel={props.onCancel}
				onOk={() => setVisible("----")}
				result={result}
				isSkuType={isSkuType}
				actionType={"update-sku-code"}
			/>
		</>
	);
}

export default ActionModal;
